<template>
  <div
    @click="handleClick(item.id)"
    class="flex items-center p-2 hover:bg-#D1F2EB"
  >
    <img
      v-if="item.picture"
      class="w-240rpx h-100px mr-4"
      :src="item.picture"
      alt=""
    />
    <div v-else class="book-item-img mr-10rpx">暂无封面</div>
    <div class="h-100px overflow-hidden">
      <p class="font-size-18px overflow-hidden ellipsis">
        <uni-tag v-if="item.type">{{ item.type }}</uni-tag
        >{{ item.name }}
      </p>
      <p v-if="item.author" class="font-size-24rpx mt-10rpx ellipsis">
        作者：{{ item.author }}
      </p>
      <p
        v-if="item.simple"
        class="ellipsis font-size-24rpx h-68rpx overflow-hidden mt-10rpx"
      >
        简介：{{ item.simple ? item.simple.trim() : "" }}
      </p>
    </div>
  </div>
</template>
<route>
  {
    layout:false
  }
</route>
<script setup lang="ts">
import { toRefs } from "vue";

interface Book {
  name: string;
  id: number;
  author: string;
  simple: string;
  price: number;
  type?: string;
  picture: string;
  [key: string]: any;
}

const props = defineProps<{
  item: Book;
}>();
const { item } = toRefs(props);

const handleClick = (id: number) => {
  uni.navigateTo({
    url: `/pages/booksDetail/booksDetail?id=${id}`,
  });
};
</script>

<style scoped>
.book-item-img {
  height: 200rpx;
  width: 150rpx;
  border-radius: 20rpx;
  overflow: hidden;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 200rpx;
  font-size: 28rpx;
  color: #ccc;
}
</style>
